<template>
    <div id="left_userinfo">
        <USERINFO/>
    </div>
    <div id="left_func">
        <FUNC v-model:current_model="current_model"
         v-model:current_expand="current_expand_model"
         v-model:show_expand="show_expand"/>
    </div>
</template>

<script setup>
import USERINFO from './user_info.vue'
import FUNC from "./func.vue"
import { defineModel,ref } from 'vue';
let current_model = defineModel('current_model', {
    type: String,
    default: 'message'
})

let current_expand_model = defineModel('current_expand')
let show_expand=defineModel('show_expand',{
    type:Boolean,
    default:false
})

</script>

<style  scoped>
:root{
    --border-radius: 8px;
    --left--userinfo-height: 20%;
}

#left_userinfo{
    height: 10%;
    width: 100%;  
    overflow: visible;
    background: linear-gradient(135deg,#6397f1,#ac85d6);
    border-radius: var(--border-radius)  var(--border-radius) 0 0;
}
#left_func{
    height: 50%;
    width: 100%;
    overflow: visible;
    border-radius: 0 0  var(--border-radius) var(--border-radius);
}


</style>